<template>
  <div>
    <!-- 左对齐 -->
    <div class="box_head">
        <list-title>在线音乐</list-title>

      <span  @click="toNewMusic"><small>更多</small><van-icon name="arrow" size="16"  /></span>

    </div>
    <van-row  class="box">
      <van-col
        span="24"
        v-for="(item, index) in musics"
        :key="index.id"
        @click="playMusic(index)"
      >
      <div>
        <span>
          <van-image
            radius="5"
            width="54"
            height="54"
            lazy-load
            :src="item.picUrl + '?param=200y200'"
          />
          <!-- <van-icon name="play-circle-o" size="25" /> -->
        </span>
        <span class="textover van-ellipsis">{{ item.name }}<sup v-show="!item.canDislike">新歌推荐</sup></span>
        <span class=" span3 textover"> {{item.ar }} </span>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import ListTitle from "@/components/video/ListTitle";
export default {
  name: "MusicRecomenMusic",
  props: ["music"],
  data() {
    return {};
  },
components:{ ListTitle},
  mounted() {},
  computed: {
    musics() {
      const musics = this.music.map((item) => ({
        id: item.id,
        name: item.name,
        picUrl: item.picUrl,
        ar: item.song.artists.map((arItem) => arItem.name).join("/"),
        arId: item.song.artists[0].id,
        arList: item.song.artists.map((items) => ({
          arname: items.name,
          arid: items.id,
        })),
        al: item.song.album.name,
        alId: item.song.album.id,
      }));
      return musics;
    },
  },
  methods: {
    playMusic(index) {
      this.$store.commit({
        type: "SET_PLAY_MUSIC",
        index: index,
        list: this.musics,
      });
    },
    toNewMusic() {
      this.$router.push("/MusicMusicListMore");
    },
  },
};
</script>

<style lang="less" scoped>
.box_head {
  height: 1.5625rem;
  line-height: 1.5625rem;
 padding: 0.3125rem 0rem;
  font-size: 1rem;
  display: flex;
   background: url(../../static/img/wrap.jpg) repeat-x 0 0; /* 添加图文列表整体的背景图片 */
  justify-content: space-between;
  h3 {
    font-weight: bold;
    font-size: 1.125rem;
  }
}
.box {
  padding:3px;
  .van-col {
 
    div{
     margin: 5px 0 5px 0;
    border-bottom: 1px solid #eee;
     border-top: 1px solid #f1fff1;

      width: 95%;
      height:3.125rem;
 position: relative;
 .textover{white-space:nowrap;
overflow:hidden;
max-width: 375px;
text-overflow:ellipsis;}
    span:nth-child(1) {
      position: absolute;
     display: block;
        left: 8px;
        top:50%;
         transform: translate(0, -50%);
      .van-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
      }
    }
    span:nth-child(2) {
      position: absolute;
       display: block;
       max-width: 300px;
       height:1.5625rem;
       line-height:1.5625rem;
     left:70px;
     top:0px;
     font-size: 16px;
     font-weight: 360;
      text-align: left;
      sup{ 
        font-size:.6rem;
     
    line-height: 0;
    top: -0.5em;
    color:#11bf72;
    padding: 1px 3px 1px 3px;
    margin-left: 8px;
    border-radius: 4px;
    background-color: rgb(180, 252, 183);
    position: relative;
    vertical-align: baseline;}
    }
     .span3 {
      position: absolute;
       display: block;
     left:70px;
     top:1.5rem;
     font-weight: 100;
     color:grey;
     line-height:1.5625rem;
     height:1.5625rem;
     font-size: 12px;
      text-align:left;
      max-width: 300px;
    }
    }
    
  }
  
}
</style>